/*
    VARIABLES
*/
$dark-grey: #3c3c3c;
$light-grey: #e6e6e6;
$section-minheight: 600px;

/*
    MIXINS
*/

@mixin translate($x,$y) {
    -moz-transform: translate($x,$y);
    -o-transform: translate($x,$y);
    -webkit-transform: translate($x,$y);
    -ms-transform: translate($x,$y);
    transform: translate($x,$y);
}

@mixin rotate($r) {
    -moz-transform: rotate($r);
    -o-transform: rotate($r);
    -webkit-transform: rotate($r);
    -ms-transform: rotate($r);
    transform: rotate($r);
}

@mixin translateRotate($x,$y,$r) {
    -moz-transform: translate($x,$y) rotate($r);
    -o-transform: translate($x,$y) rotate($r);
    -webkit-transform: translate($x,$y) rotate($r);
    -ms-transform: translate($x,$y) rotate($r);
    transform: translate($x,$y) rotate($r);
}

@mixin transition($t...) {
    -webkit-transition: $t;
    -o-transition: $t;
    -moz-transition: $t;
    -ms-transition: $t;
    transition: $t;
}

/*
    GLOBALS
*/

.section {
    min-height: $section-minheight;
    position: relative;
}

.title-bar {
    
    h1 {
        position: relative;
        padding: 20px;
        text-align: center;
        width: 100%;
        background-color: $dark-grey;
        color: #FFFFFF;
        z-index: 10;
    }
    
    div {
        z-index: 5;
        position: absolute;
        left: 50%;
        bottom: 0;
        @include translateRotate(-50%,50%,45deg);
        background-color: $dark-grey;
        width: 40px;
        height: 40px;
    }
    
    position: relative;
}

/*
    STARTING PAGE
*/

#section-start {
    background-color: $dark-grey;
    color: #FFFFFF;
    position: relative;
}

#menu-wrapper {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
    position: absolute;
    right: 50px;
    top: 10px;
    z-index: 10;
    cursor: pointer;
    
    #menu {
        
        
        li {
            font-size: 20px;
            background-color: $light-grey;
            color: $dark-grey;
            width: 200px;
            height: 0;
            padding: 0;
            overflow: hidden;
            @include transition(.3s height, .3s padding, .3s background, .3s color);
            
            &:hover {
                background-color: $dark-grey;
                color: $light-grey;
            }
            
        }
        
        position:absolute;
        right: 0;
        text-align: left;
    }
    
    &:hover {
        #menu {
            li {
                padding: 0 0 0 20px;
                height: 40px;
            }
        }
    }
    
}

#introduction {
    height: 100%;
    position: relative;
}

.introduction-item {
    width: 100%;
    padding: 10px 0 ;
    text-align: center;
}

#introduction-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

#introduction-arrow {
    font-size: 30px;
    cursor: pointer;
}

/*
    ABOUT
*/

#about-wrapper {
    
    height: $section-minheight;
    
    .col-xs-6 {
        height: $section-minheight;
        padding: 0 30px;
    }
    
}

#about-info {
    margin: 50px 0;
    display: block;
}

#about-photo {
    height: $section-minheight - 100px;
    margin: 50px 0;
}

#about-contact {
    position: absolute;
    bottom: 50px;
}

#contact-list {
    
    li {
        padding: 5px 0;
    }
    
}
/*
   EMPLOYMENT
*/

.timeline-years {
    
    div {
        height: 30px;
        padding: 0;
    }
    
    .left {
        div {
            float: right;
        }
        border-right: 1px solid $dark-grey;
    }
    .right {
        div {
            float: left;
        }
        border-left: 1px solid $dark-grey;
    }
    .blank {
        border-bottom: 2px solid $dark-grey;
    }
    .filled {
        div {
            padding: 0 10px;
            width: 120px;
            height: 30px;
            border-bottom: 2px solid $dark-grey;
            text-align: center;
        }
    }
    
    width: 100%;
    height: 30px;
}

.timeline-details {
    
    .right {
        border-left: 1px solid $dark-grey;
        height: 100%;
    }
    .left {
        border-right: 1px solid $dark-grey;
        height: 100%;
    }
    
    .filled {
        .title {
            div {
                float: left;
            }
            .company {
                font-style: italic;
                font-weight: 400;
            }
            font-weight: 900;
            padding: 25px;
        }
        .description {
            padding: 5px 5px 5px 25px;
            text-align: justify;
        }
    }
    
    height: 130px;
}